<!-- 门诊病历 -->
<template>
	<el-container>
		<el-header>
			<NavMenu activeIndex="3" />
		</el-header>
		<el-container>
			<el-main>
				<el-affix target=".el-main" :offset="60">
					<el-button text :icon="UploadFilled" @click="onSave">保存</el-button>
					<el-button text :icon="DocumentCopy" @click="onSaveTemplate">另存为模板</el-button>
					<el-button text :icon="Printer" @click="onPrint">打印</el-button>
					<el-button text :icon="Folder">调阅以往健康记录</el-button>
					<el-button text :icon="Notebook">医疗知识库</el-button>
				</el-affix>
				<div class="paper">
					<div class="paper-header">门诊病历</div>
					<div class="paper-row">
						<div style="flex-grow: 1;" />
						<div class="flex-right font-bold" style="flex-basis: 4%;">No：</div>
						<div class="flex-center font-underlined" style="flex-basis: 16%;">{{digID}}</div>
					</div>
					<div class="paper-row">
						<div class="flex-center font-bold" style="flex-basis: 8%;">科别：</div>
						<div class="flex-left font-bold" style="flex-basis: 24%;">内一科</div>
						<div style="flex-grow: 1;" />
						<div class="flex-right font-bold" style="flex-basis: 8%;">就诊时间：</div>
						<div class="flex-center font" style="flex-basis: 16%;">{{lastModifyTime}}</div>
					</div>
					<div class="frame" style="aspect-ratio: 1 / 1;">
						<div class="form-row">
							<div class="form-label" style="flex-basis: 8%;">就诊类别：</div>
							<div class="form-select" style="flex-basis: 12%;">
								<select v-model="visitType" placeholder="">
									<option value="初诊">初诊</option>
									<option value="复诊">复诊</option>
									<option value=""></option>
								</select>
							</div>
							<div class="form-label" style="flex-basis: 5%;">姓名：</div>
							<div class="form-value" style="flex-basis: 15%;">
								<input v-model="name" disabled />
							</div>
							<div class="form-label" style="flex-basis: 8%;">性别：</div>
							<div class="form-select" style="flex-basis: 8%;">
								<select v-model="sex" placeholder="" disabled>
									<option value="男">男</option>
									<option value="女">女</option>
									<option value=""></option>
								</select>
							</div>
							<div class="form-label" style="flex-basis: 6%;">年龄：</div>
							<div class="form-value" style="flex-grow: 1; flex-shrink: 1;">
								<input v-model="age[0]" style="text-align: right;" disabled />岁
							</div>
							<div class="form-value" style="flex-grow: 1; flex-shrink: 1;">
								<input v-model="age[1]" style="text-align: right;" disabled />月
							</div>
							<div class="form-value" style="flex-grow: 1; flex-shrink: 1;">
								<input v-model="age[2]" style="text-align: right;" disabled />天
							</div>
						</div>
						<div class="form-row">
							<div class="form-label" style="flex-basis: 8%;">职业类别：</div>
							<div class="form-select" style="flex-basis: 12%;">
								<select v-model="careerType" placeholder="">
									<option value="农、林、牧、渔及辅助性活动">农、林、牧、渔及辅助性活动</option>
									<option value=""></option>
								</select>
							</div>
							<div class="form-label" style="flex-basis: 5%;">电话：</div>
							<div class="form-value" style="flex-basis: 15%;">
								<input v-model="tel" disabled />
							</div>
							<div class="form-label" style="flex-basis: 8%;">家庭住址：</div>
							<div class="form-value" style="flex-grow: 1; flex-shrink: 1;">
								<input v-model="address" />
							</div>
						</div>
						<div class="form-row">
							<div class="form-label" style="flex-basis: 8%;">发病日期：</div>
							<div class="form-value" style="flex-basis: 12%;">
								<input v-model="onsetDate" />
							</div>
							<div class="form-label" style="flex-basis: 5%;">诊断：</div>
							<div class="form-value" style="flex-basis: 15%;">
								<input v-model="diagnosis" />
							</div>
							<div class="form-label" style="flex-basis: 8%;">药敏史：</div>
							<checkbox-group class="form-multicheck" style="flex-grow: 1; flex-shrink: 1;"
								@change="onAllergyCheckboxChange">
								<label style="flex-basis: 10%;">
									<checkbox value="无" />无
								</label>
								<label style="flex-basis: 20%;">
									<checkbox value="青霉素" />青霉素
								</label>
								<label style="flex-basis: 15%;">
									<checkbox value="磺胺" />磺胺
								</label>
								<label style="flex-basis: 20%;">
									<checkbox value="链霉素" />链霉素
								</label>
								<label class="flex-left" style="flex-basis: 15%;">
									<checkbox value="其它" />其它
								</label>
								<input style="border-bottom: var(--el-border); flex-grow: 1; flex-shrink: 1;" />
							</checkbox-group>
						</div>
						<div class="form-row-large">
							<div class="form-label" style="justify-content: center; flex-basis: 12%">主诉</div>
							<div class="form-value" style="flex-grow: 1; flex-shrink: 1;">
								<textarea v-model="chiefComplaint" />
							</div>
						</div>
						<div class="form-row-large">
							<div class="form-label" style="justify-content: center; flex-basis: 12%">现病史</div>
							<div class="form-value" style="flex-grow: 1; flex-shrink: 1;">
								<textarea v-model="presentIllness" />
							</div>
						</div>
					</div>
				</div>
			</el-main>
			<el-aside style="border-left: var(--el-border);">
				<Card title="模板">
					<el-row>
						<el-col :span="1" />
						<el-col :span="4" class="flex-center"><el-text>检索：</el-text></el-col>
						<el-col :span="18">
							<el-autocomplete v-model="templateRetrievalSearchWord"
								:fetch-suggestions="onTemplateRetrievalFetchSuggestions" clearable />
						</el-col>
						<el-col :span="1" />
					</el-row>
					<el-tabs type="border-card" style="margin: 5px;" @tab-change="onTemplateRetrievalTabChange">
						<el-tab-pane label="短语" style="height: 200px;">
							<el-table :data="templateRetrievalTableData" :max-height="200">
								<el-table-column prop="name" label="名称" show-overflow-tooltip />
								<el-table-column prop="content" label="内容" show-overflow-tooltip />
							</el-table>
						</el-tab-pane>
						<el-tab-pane label="模板"></el-tab-pane>
						<el-tab-pane label="特殊字符"></el-tab-pane>
					</el-tabs>
				</Card>
			</el-aside>
		</el-container>
	</el-container>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import axiosInstance from '@/Config/axiosConfig'
	import globalStore from '@/store/GlobalStore';
	import Emessage from '@/Utils/Message';
	import { ElNotification } from 'element-plus';
	import { UploadFilled, DocumentCopy, Printer, Folder, Notebook } from '@element-plus/icons-vue';
	import '@/pages/doctor/styles/common.scss';
	import '@/pages/doctor/styles/form.scss';
	import { integer2sex, dateDifference, formatDatetime } from '@/pages/doctor/scripts/common.ts';
	import NavMenu from '@/pages/doctor/components/NavMenu';
	import Card from '@/pages/doctor/components/Card';

	const docID = uni.getStorageSync('id');
	const doctorCurrentPatient = uni.getStorageSync('doctorCurrentPatient');
	const regID = doctorCurrentPatient.regID;
	const patientID = doctorCurrentPatient.patientID;

	// 门诊病历
	const digID = ref(null);
	const lastModifyTime = ref('');
	const visitType = ref('');
	const name = ref('');
	const sex = ref('');
	const age = ref(['', '', '']);
	const careerType = ref('');
	const tel = ref('');
	const address = ref('');
	const onsetDate = ref('');
	const diagnosis = ref('');
	const allergies = ref([]);
	const chiefComplaint = ref('');
	const presentIllness = ref('');

	const getFormData = async () => {
		try {
			const response = await axiosInstance.get('/doc/getPatientDetailById?patientId=' + patientID);
			if (response.status == 200) {
				const p = response.data;
				name.value = p.name;
				sex.value = integer2sex(p.sex);
				age.value = dateDifference(new Date(), new Date(p.birthday));
				tel.value = p.tel;
				try {
					const response2 = await axiosInstance.get('/doc/getRecordByRegId?regId=' + regID);
					if (response2.status == 200) {
						const d = response2.data;
						if (d) {
							digID.value = d.id;
							lastModifyTime.value = formatDatetime(new Date(d.time));
							diagnosis.value = d.remarks;
						}
					} else {
						ElNotification({ title: response2.status, message: response2.statusText, type: 'error', duration: 3000 });
					}
				} catch (e) {
					ElNotification({ title: e.status, message: e.message, type: 'error', duration: 3000 });
				}
			} else {
				ElNotification({ title: response.status, message: response.statusText, type: 'error', duration: 3000 });
			}
		} catch (e) {
			ElNotification({ title: '错误', message: '无法连接服务器！', type: 'error', duration: 3000 });
		}
	};

	const onSave = async () => {
		try {
			if (!digID.value) {
				const response = await axiosInstance.post('/doc/newDiagRecord', {
					doctorId: docID,
					patientId: patientID,
					regId: regID,
					remarks: diagnosis.value,
				});
				if (response.status == 200) {
					const data = response.data;
					digID.value = data;
					ElNotification({ title: '保存', message: '成功保存病人的病历。', type: 'success', duration: 3000 });
				} else {
					ElNotification({ title: response.status, message: response.statusText, type: 'error', duration: 3000 });
				}
			} else {
				const response = await axiosInstance.post('/doc/updateDiagRecordById', {
					id: digID.value,
					doctorId: docID,
					patientId: patientID,
					regId: regID,
					remarks: diagnosis.value,
				});
				if (response.status == 200) {
					const data = response.data;
					ElNotification({ title: '保存', message: '成功保存病人的病历。', type: 'success', duration: 3000 });
				} else {
					ElNotification({ title: response.status, message: response.statusText, type: 'error', duration: 3000 });
				}
			}
		} catch (e) {
			ElNotification({ title: '错误', message: '无法连接服务器！', type: 'error', duration: 3000 });
		}
		getFormData();
	};

	const onSaveTemplate = () => {
		Emessage("TODO: 另存为模板", "error");
	};

	const onPrint = () => {
		Emessage("TODO: 打印", "error");
	};

	const onAllergyCheckboxChange = (e) => {
		console.log(e.detail.value);
		Emessage("TODO: 多选", "error");
	};

	getFormData();

	// 模板检索
	const templateRetrievalSearchWord = ref('')
	const templateRetrievalTableData = [{ name: 'CT检查', content: '头颅、颈部' }]

	const onTemplateRetrievalFetchSuggestions = (queryString : string, cb : any) => {
		const results = [
			{ value: 'vue', link: 'https://github.com/vuejs/vue' },
			{ value: 'element', link: 'https://github.com/ElemeFE/element' },
			{ value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
			{ value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
			{ value: 'vuex', link: 'https://github.com/vuejs/vuex' },
			{ value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
			{ value: 'babel', link: 'https://github.com/babel/babel' },
		]
		Emessage("TODO: 自动补全", "error");
		cb(results)
	}

	const onTemplateRetrievalTabChange = (name : string) => {
		Emessage("TODO: 切换标签页", "error");
	}
</script>

<style lang="scss" scoped>

</style>